<template>
  <div class="tablePage">

     <!--  表格  -->
     <el-table
       v-loading="loading"
       :data="dataList"
       @selection-change="handleSelectionChange"
     >
       <el-table-column v-if="showSelection" type="selection" width="55" align="center" />

       <el-table-column
         v-for="item in tableHead"
         :key="item.props"
         :label="item.label"
         :align="item.position"
         :width="item.width || ''"
       >
         <template slot-scope="scope">
           <template v-if="item.fieldType == 'image'">
             <img :src="scope.row[item.props]" width="100" height="100" />
           </template>

           <template v-else>
             {{ scope.row[item.props] }}
           </template>
         </template>
       </el-table-column>

       <el-table-column label="操作" align="center" v-if="showOperate">
         <template slot-scope="scope">
           <slot name="rowOperate" :row="scope.row"></slot>
         </template>
       </el-table-column>

     </el-table>

     <!--  分页  -->
     <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageTableNum"
      :limit.sync="pageTableSize"
      @pagination="getList"
     />

  </div>
</template>

<script>
  // 二次封装表单，分页组件
  export default {
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      dataList: {
        type: Array,
        default:()=>[]
      },
      tableHead: {
        type: Array,
        default:()=>[]
      },
      showSelection: {
        type: Boolean,
        default: false
      },
      showOperate: {
        type: Boolean,
        default: true
      },
      total: {
        type: Number,
        default: 0
      },
      pageNum: {
        type: Number,
        default: 1
      },
      pageSize: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        pageTableNum: 1,
        pageTableSize: 10
      }
    },
    watch: {
      'pageNum': {
        handler(val) {
          this.pageTableNum = val;
        },
        immediate: true
      },
      'pageSize': {
        handler(val) {
          this.pageTableSize = val;
        },
        immediate: true
      }
    },
    methods: {
      handleSelectionChange(selection) {
        this.$emit('handleSelectionChange', selection);
      },
      getList() {
        this.$emit("pagination", {pageNum: this.pageTableNum, pageSize: this.pageTableSize});
      },

    }
  }
</script>

<style scoped>

</style>
